<template>
  <div>
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      mode="default" />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      mode="default"
      @onCreated="handleCreated" />
  </div>
</template>
<script lang="ts" setup>
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  import { useCatalogStore } from '@/stores'

  const catalogStore = useCatalogStore()
  // 编辑器实例，必须用 shallowRef
  const editorRef = shallowRef()

  // 内容 HTML
  const valueHtml = defineModel('modelValue', { required: true, type: String })
  watch(
    () => valueHtml.value,
    v => {
      console.log('🚀 ~ watch ~ v:', v)
    }
  )
  watch(
    () => catalogStore.catalog.isSave,
    isSave => {
      if (isSave) editorRef.value.disable()
      else editorRef.value.enable()
    }
  )

  const toolbarConfig = {}
  const editorConfig = { placeholder: '请输入内容...' }

  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })

  const handleCreated = (editor: unknown) => {
    editorRef.value = editor // 记录 editor 实例，重要！
  }
</script>

<style scoped>
  .border-right {
    border-right: 2px solid #e3e3e3;
  }
</style>
